<template>
    <div class="wrapper dialog" :class="{'ios':ios,'iphonex':iphonex,'CustomPopupContentShow':isShowLoginModal}" >
        <div class="shadow" :class="{'bg':select=='1'}"></div>
        <div class="inner">
            <div class="login-content" v-show="select=='1'">
                <mt-login @rightEvent="rightEvent" :key="childKey"/>
            </div>
            <div class="register-content" v-show="select=='2'">
                <mt-register @rightEvent="rightEvent" :key="childKey"/>
            </div>
            <div class="findpwd-content" v-show="select=='3'">
                <mt-findpwd @rightEvent="rightEvent" :key="childKey"/>
            </div>
            <div class="file-content" v-show="select=='4'">
                <mt-file @rightEvent="rightEvent" :key="childKey"/>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import mtLogin from "@/components/Login/index"
import mtRegister from "@/components/Register/index"
import mtFindpwd from "@/components/FindPwd/index"
import mtFile from "@/components/File/index"
import { getSystemType, isIphonex } from '@/utils'
export default {
    name: 'App',
    data(){
        return {
            ios:false,
			iphonex:false,
            select: '1',
            childKey:1
        }
    },
    components:{
        mtLogin,
        mtRegister,
        mtFindpwd,
        mtFile
    },
    computed: {
		...mapState('app', [
			'isShowLoginModal'
		])
	},
    watch:{
        isShowLoginModal(curval,oldval){
            if(!this.curval){
                this.childKey++
                setTimeout(()=>{
                    this.select = '1'
                },300)
            }
        }
    },
    mounted(){
		if( getSystemType().type == 'ios' ){
			this.ios = true;
			if(isIphonex()){
				this.iphonex = true;
			}
		}
  	},
    methods:{
        rightEvent(value){
            this.select = value
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    background:#fff;
    transition: all 0.3s ease;
    transform: translateY(100%);
    &.CustomPopupContentShow {
        transform: translateY(0);
    }
    .shadow{
        position:absolute;
		top:0;
		left:0;
		right:0;
        height:0px;
    }
    .inner{
        height:100%;
        >div{
            height:100%;
            position:relative;
        }
    }
    &.ios{
        padding-top:20px;
        .shadow{
            height:20px;
        }
    }
    &.iphonex{
        padding-top:45px;
        .shadow{
            height:45px;
        }
    }
    .bg{
        background: #465FF7;
    }
}
</style>
